<template>


	<div class="search-component">

		<i class="flex unified-flex-align unified-flex-center search-icon el-icon-search"></i>

		<slot name="default">
			
		</slot>
		
		
		
		<div class="search-btn unified-cursor-default unified-text-select" @click="clickBtn">{{text}}</div>

	</div>


</template>

<script>
	export default {

		props: {
			icon: {
				type: String,
				default: "el-icon-search"
			},
			// 搜索按钮文本
			text: {

				type: String,
				default: "搜索"

			}
		},
		methods: {


			change() {



			},
			// 点击按钮
			clickBtn(){
				this.$emit('click')
			}
			

		}

	}
</script>

<style scoped="scoped">
	.search-component {
		width: auto;	
		max-height: 45px;
		height: 45px;
		position: relative;
		border-radius: 30px;
		overflow: hidden;
		border: 1px solid #c3c3c364;
		padding:0px 50px;
		padding-right: 80px;
		line-height: 45px;
	}

	.search-icon,
	.search-btn {
		text-align: center;
		line-height: 30px;
		position: absolute;
		top: 7px;
		width: 30px;
		height: 30px;
		color: #fff;
	}

	.search-icon {
		border-radius: 50%;
		background-color: #07C160;
		left: 10px;
	}

	.search-btn {
		width: 60px;
		background-color: #2269F3;
		right: 10px;
		border-radius: 20px;
		font-size: 10px;
		letter-spacing: 1px;
	}

	.search-btn:hover {
		background-color: #F74F0E;
	}

	.search-input {
		width: 100%;
		border: none;
		flex: 1;
		outline: none;
		height: 100%;
	}
</style>
